<ion-header>

  <ion-toolbar>
    <ion-title>Social Card</ion-title>
  </ion-toolbar>

</ion-header>


<ion-content class="social-cards">

  <ion-card>

    <ion-item>
      <ion-avatar item-start>
        <img src="">
      </ion-avatar>
      <h2>Marty McFly</h2>
      <p>November 5, 1955</p>
    </ion-item>

    <img src="">

    <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
    </ion-card-content>

    <ion-item>
      <button ion-button icon-start primary clear item-start>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>12 Likes</div>
      </button>
      <button ion-button icon-start primary clear item-start>
        <ion-icon name="text"></ion-icon>
        <div>4 Comments</div>
      </button>
      <ion-note item-end>
        11h ago
      </ion-note>
    </ion-item>

  </ion-card>


  <ion-card>

    <ion-item>
      <ion-avatar item-start>
        <img src="">
      </ion-avatar>
      <h2>Sarah Connor</h2>
      <p>May 12, 1984</p>
    </ion-item>

    <img src="">

    <ion-card-content>
    <p>I face the unknown future, with a sense of hope. Because if a machine, a Terminator, can learn the value of human life, maybe we can too.</p>
    </ion-card-content>

    <ion-item>
      <button ion-button icon-start primary clear item-start>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>30 Likes</div>
      </button>
      <button ion-button icon-start primary clear item-start>
        <ion-icon name="text"></ion-icon>
        <div>64 Comments</div>
      </button>
      <ion-note item-end>
        30yr ago
      </ion-note>
    </ion-item>

  </ion-card>

  <ion-card>

    <ion-item>
      <ion-avatar item-start>
        <img src="">
      </ion-avatar>
      <h2>Dr. Ian Malcolm</h2>
      <p>June 28, 1990</p>
    </ion-item>

    <img src="">

    <ion-card-content>
    <p>Your scientists were so preoccupied with whether or not they could, that they didn't stop to think if they should.</p>
    </ion-card-content>

    <ion-item>
      <button ion-button icon-start primary clear item-start>
        <ion-icon name="thumbs-up"></ion-icon>
        <div>46 Likes</div>
      </button>
      <button ion-button icon-start primary clear item-start>
        <ion-icon name="text"></ion-icon>
        <div>66 Comments</div>
      </button>
      <ion-note item-end>
        2d ago
      </ion-note>
    </ion-item>

  </ion-card>

</ion-content>


<style>
  .social-cards img {
    height: 200px;
  }
</style>
